<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过渡效果</title>
		<style>
		tr{
			float: left;
		}
			td{
				width: 500px;
				height: 300px;
				border: 1px solid #000000;
				/* transition: width 2s,transform 2s;
				-webkit-transition:width 2s, -webkit-transform 2s;; */
			}
			/* div:hover{
				width: 80px;
				background: yellow;
			} */
			div{
				width: 80px;
				height: 80px;
				background: red;
				margin: auto;
				transition: 0.5s;
				/* transition: width 2s,transform 2s;
				-webkit-transition:width 2s, -webkit-transform 2s;; */
			}
			tr:nth-child(1):hover .box{
				transform: skew(30deg,10deg);
			}
			tr:nth-child(2):hover .box{
				transform: skew(60deg);
			}
			tr:nth-child(3):hover .box{
				transform: skew(30deg);
			}
			tr:nth-child(4):hover .box{
				transform: skew(20deg);
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td><div class="box"></div></td>
			</tr>
			<tr>
				<td><div class="box"></div></td>
			</tr>
			<tr>
				<td><div class="box"></div></td>
			</tr>
			<tr>
				<td><div class="box"></div></td>
			</tr>
			
		</table>
	</body>
</html>
